<template>
  <div>
    <el-button type="primary" @click="incrementAccount">新增账户</el-button>

    <el-table :data="tableData" style="width: 100%" class="mt-3">
      <el-table-column prop="nickName" label="名称" />
      <el-table-column prop="userName" label="登陆账号" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="modifyItem(scope.row)">修改</el-button>
          <el-button type="danger" @click="removeAccount(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="mt-3 flex justify-center">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <el-dialog v-model="accountShow" title="新增/修改账号" width="50%" center>
      <el-form ref="ruleFormRef" :model="accountData" :rules="rules" label-width="auto" class="demo-ruleForm"
        status-icon scroll-to-error>
        <el-form-item label="账号名称" prop="nickName">
          <el-input v-model="accountData.nickName" placeholder="请输入账号名称" />
        </el-form-item>
        <el-form-item label="登陆账号" prop="userName" v-if="accountData.id == ''">
          <el-input v-model="accountData.userName" placeholder="请输入登陆账号" />
        </el-form-item>
        <el-form-item label="登陆密码" prop="userPassword">
          <el-input v-model="accountData.userPassword" placeholder="请输入登录密码" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="accountData.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="账号备注" prop="remark">
          <el-input v-model="accountData.remark" style="width: 100%" :autosize="{ minRows: 4, maxRows: 6 }"
            type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="saveAccount">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import {
  accountList, incrementAccountItem, modifyAccount, removeAccountItem
} from '@/network/account'

const rules = reactive<any>({
  nickName: [{ required: true, message: '请输入账号名称', trigger: 'blur' }],
  userName: [{ required: true, message: '请输入登陆账号', trigger: 'blur' }],
  userPassword: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
})
const ruleFormRef = ref() // 表单 ref
const accountData = reactive<any>({})
const accountShow = ref<boolean>(false)
interface Account {
  id: number;
  name: string;
  loginAccount: string;
  remark: string;
  createTime: string;
}

const tableData = reactive<Account[]>([])
const total = ref(0) // 总数量
const currentPage = ref(1) // 页数
const pageSize = ref(10) // 每页数量

// 页数改变
const handleCurrentChange = (page: number) => {
  console.log(page)
}
// 数量改变
const handleSizeChange = (size: number) => {
  console.log(size)
}
// 点击保存账户
const saveAccount = () => {
  ruleFormRef.value.validate((result: boolean) => {
    if (!result) return
    if (accountData.userId) {
      modifyAccount(accountData).then((res) => {
        if (res.code != 200) return
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        accountShow.value = false
        ruleFormRef.value.resetFields()
        getData()
      })
      return
    }
    accountData.userType = 'NOMAL'
    accountData.userStatus = 'EFFECTIVE'
    accountData.roleId = 2
    incrementAccountItem(accountData).then((res) => {
      if (res.code != 200) return
      ElMessage({
        message: '保存成功',
        type: 'success',
      })
      accountShow.value = false
      ruleFormRef.value.resetFields()
      getData()
    })
  })
}
// 点击新增账户
const incrementAccount = () => {
  accountShow.value = true
}
// 点击删除账号
const removeAccount = (id: string | number) => {
  ElMessageBox.alert('确认删除此账号吗?', '提示', {
    confirmButtonText: '确认',
    showCancelButton: true,
    cancelButtonText: '取消',
    callback: (action: Action) => {
      if (action === 'confirm') {
        removeAccountItem(id).then((res) => {
          if (res.code != 200) return
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
          getData()
        })
      }
    },
  })
}
// 点击修改账号
const modifyItem = (item: any) => {
  accountData.userId = item.id
  accountData.nickName = item.nickName
  accountData.phone = item.phone
  accountData.remark = item.remark
  accountData.roleId = item.roleId
  accountShow.value = true
}
// 获取列表数据
const getData = () => {
  accountList(currentPage.value, pageSize.value).then((res) => {
    tableData.length = 0
    tableData.push(...res.data.list)
    total.value = res.data.total
  })
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped></style>
